<template>
    <div class="video-container">
      <!-- 显示原始视频 -->
      <img
        src="@/assets/images/video.png"
        :style="`width:${realWidth};height:${realHeight};`"
        @click="toggleFullscreen"/>
      
      <!-- 全屏展示视频 -->
    </div>
  </template>
   
  <script>
  export default {
    name: "VideoView",
  props: {
    src: {
      type: String,
      default: ""
    },
    width: {
      type: [Number, String],
      default: ""
    },
    height: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      isFullScreen: false // 控制是否进入全屏模式
    };
  },
    methods: {
      toggleFullscreen() {
        window.open(this.src,"订单视频")
      }
    },
    computed: {
    realSrc() {
      if (!this.src) {
        return;
      }
      let real_src = this.src.split(",")[0];
      return real_src;
    },
    realSrcList() {
      if (!this.src) {
        return;
      }
      let real_src_list = this.src.split(",");
      let srcList = [];
      real_src_list.forEach(item => {
        return srcList.push(item);
      });
      return srcList;
    },
    realWidth() {
      return typeof this.width == "string" ? this.width : `${this.width}px`;
    },
    realHeight() {
      return typeof this.height == "string" ? this.height : `${this.height}px`;
    }
  },
  };
  </script>
   
  <style scoped>
  /* CSS样式可以根据需要自定义 */
  .video-viewer_wrapper {
    z-index: 2100;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .video-viewer_mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    background: #000;
  }
   
  .video-container img {
    width: 100%; /* 或者其他合适的宽度值 */
    height: auto;
    cursor: pointer;
  }
   
  .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* 使用viewport单位确保视频充满整个屏幕 */
    height: 100vh;
  }
  </style>